<template>
  <div class="scroll-snap-container fullscreen" @scroll="scroll" id="fullScroll">
    <slot/>
  </div>
</template>

<script>
let scrollTop = 0;
export default {
  name: "full-scroll",
  data() {
    return {
      currentPage: 0
    }
  },
  methods: {
    scroll() {
      let scroll = document.getElementById("fullScroll")
      let tmpPage = scroll.scrollTop / scroll.clientHeight;
      if (scroll.scrollTop>scrollTop){

        if (this.currentPage+1<=tmpPage+0.1){
            this.currentPage+=1;
            this.$emit("pageChange",this.currentPage)
        }
      }else {
          //console.log(this.currentPage-1,tmpPage+0.1)
        if (this.currentPage-0.9>tmpPage){
            this.currentPage-=1;
            this.$emit("pageChange",this.currentPage)
        }
      }
      scrollTop = scroll.scrollTop;
    }
  }
}
</script>

<style>

.scroll-snap-container {
  display: block;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
}

.scroll-snap-container.fullscreen {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
}

.item {
  scroll-snap-align: start;
}

.scroll-snap-container.fullscreen > .item {
  min-height: calc(100% - 154px);
  height: calc(100% - 154px);
  padding: 154px 0 0 0;
  flex: 1;
  overflow: hidden;
}

.scroll-snap-container.horizontal > .item {
  scroll-snap-align: center;
}

.scroll-snap-container.fullscreen.horizontal > .item {
  scroll-snap-align: center;
  min-width: 100%;
  flex: 1;
}

.scroll-snap-container {
  height: 100%;
  overflow: auto;
}

.scroll-snap-container::-webkit-scrollbar {
  width: 0;
}
</style>

